<template>
  <div>
    <!-- 1. 给组件标签， 设置ref属性="自定义ref名称" -->
    <hm-color ref="xxx"></hm-color>

    <button @click="clickFn">点我获取子组件的数据</button>
  </div>
</template>

<script>
/*
  学习目标：ref获取子组件的实例对象 - 可以获取子组件所有的数据和方法
*/
import HmColor from "./components/HmColor.vue";
export default {
  components: { HmColor },
  methods: {
    clickFn() {
      // 2. this.$refs.自定义ref名称: 获取组件实例对象
      console.log("this.$refs.xxx  ----->  ", this.$refs.xxx.fn());
    },
  },
};
</script>

<style></style>
